<template>
  <div class="data-view">
    <el-card>
        <div id="main1"></div>
    </el-card>
    <el-card>
         <div id="main2"></div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "",
  props: [""],
  data() {
    return {};
  },

  components: {},

  computed: {},

  created() {
     
  },

  mounted() {
    // console.log(document.getElementById('main1'))
    var myChart=this.$echarts.init(document.getElementById('main1'))
    myChart.setOption({
        title: {
          text: '班级人数'
        },
        tooltip: {},
        legend: {
          data: ['班级']
        },
        xAxis: {
          data: ['3班', '4班', '5班', '6班', '7班', '8班']
        },
        yAxis: {},
        series: [
          {
            name: '人数',
            type: 'bar',
            data: [67, 45, 57, 46, 60, 44]
          }
        ]
    })
     var myChart1=this.$echarts.init(document.getElementById('main2'))
    let  option={
         title: {
          text: 'IT学习项目'
        },
        tooltip: {},
        legend: {
          data: ['JAVA','JS','GIT','GITHUB','CSS','VUE']
        },
        xAxis: {
          data: ['3班', '4班', '5班', '6班', '7班', '8班']
        },
        yAxis: {
            type:'value'
        },
        series: [
          {
            name: 'JAVA',
            type: 'line',
            stack:'总量',
            data: [621, 323, 423, 436, 330, 434]
          },
          {
            name: 'JS',
            type: 'line',
            stack:'总量',
            data: [221, 123, 223, 236, 130, 414]
          },
          {
            name: 'GIT',
            type: 'line',
            stack:'总量',
            data: [121, 223, 423, 436, 330, 234]
          },
          {
            name: 'GITHUB',
            type: 'line',
            stack:'总量',
            data: [121, 323, 223, 423, 330, 134]
          },
          {
            name: 'CSS',
            type: 'line',
            stack:'总量',
            data: [222, 323, 23, 436, 330, 434]
          },
          {
            name: 'VUE',
            type: 'line',
            stack:'总量',
            data: [321, 223, 223, 436, 330, 634]
          },
        ]
    }
    myChart1.setOption(option)
  },

  methods: {},
};
</script>
<style scoped lang="less">
.data-view{
    width: 100%;
    display: flex;
    justify-content: space-between;
    .el-card{
        width: 50%;
        #main1,#main2{
            height: 500px;
        }
    }
}
</style>